<template>
    <div class="rone">
         <!-- 顶部组件 -->
         <header-nav></header-nav>
        <ul>
            <li v-for="item in ranklists" :key = "item.id">
                <div class="ran-item">
                    <!-- <div class="itemimg"> -->
                       <router-link tag="div" class="itemimg" :to="'/rank/ranklist?id='+item.id">
                        <!-- <van-image
                            
                            :src="item.coverImgUrl" :src="item.coverImgUrl"
                            /> -->
                         <img v-lazy="item.coverImgUrl" alt="">
                       </router-link>
                    <!-- </div> -->
                    <div class="text" v-if="item.tracks">
                          <P v-for="(ele,i) in item.tracks" :key="ele.id"  v-show="i<3"> 
                              {{i+1}}.{{ele.name}}&nbsp;-&nbsp;{{ele.ar[0].name}}
                          </P>
                    </div>
                </div>
            </li>
        </ul>

          <!-- 底部导航 -->
        <!-- <foot-nav></foot-nav> -->
    </div>
</template>
<script>
//引入头部组件
import headerNav from "../components/base/headerNav.vue"
//引入底部导航
// import footNav from "../components/base/footNav.vue"
//引入数据
import {getrankingList,getPlaylist} from "../api/rank"
// import {} from "../api/rank"

export default {
    data(){
        return{
            ranklists:[],
            playlist:[]
        }
    },
    beforeRouteEnter(to,from,next){
        // console.log("beforeRouteEnter 钩子")
        //接口一
         getrankingList().then(data=>{
             next(vm=>vm.getrankingListd(data.list));
         })
    },
    methods:{
        //接口二
        getrankingListd(list){
                //接口二
            for(let i =0 ;i<list.length;i++){
                 let id = list[i].id;
                 getPlaylist({id:id}).then((data)=>{
                  this.ranklists.push(data.playlist)
                })
            }
        }

        // getToplist(){
        //     getrankingList().then(data=>{
                
        //         for(let i =0 ;i<15;i++){
        //             let id = data.list[i].id;
        //             getPlaylist({id:id}).then(data=>{
        //                 // console.log(data)
        //                 //  this.playlist.push()
        //                 this.ranklists.push(data.playlist)
        //             })
        //         }

        //     })
        // }
    
    },
    created(){
        // this.getToplist();

    },
     components:{
    headerNav,
    // footNav
  }
}
</script>

<style lang="less">
//榜单
ul{
    margin-top: 10px;
    width: 100%;
    z-index: 1003;
    li{
        min-height: 90px;
        .ran-item{
            width: 95%;
            margin: auto;
           min-height: 80px;
            // background-color: aqua;
            display: flex;
            padding: 5px;
             border-bottom: 1px solid #e5e6e6;
            .itemimg{
                width: 25%;
                height: 100%;
                // border-radius: 5px 5px 5px 5px;
                // border: ;
                overflow: hidden;
                // background-color: brown;
                // display: inline-block;
                img{
                    width: 100%;
                }
            }
            .text{
                width: 75%;
                height:90%;
                padding: 8px;
                line-height: 25px;
                position: relative;
                // overflow: hidden;
                p{
                    // display: block;
                    width: 100%;
                    height: 22px;
                    font-size: 10px;
                    overflow: hidden;
                }
            }
        }
    }
}
.rone{
    padding-bottom: 40px;
}
   
</style>